<template>
  <view class="big-bc">
    <z-paging class="container" ref="paging" @query="queryList" refresher-only>
      <template #top>
        // #ifdef APP-PLUS
        <view style="height: 50rpx"></view>
        // #endif
      </template>

      <template #refresher="{ refresherStatus }">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <custom-refresher :status="refresherStatus" />
      </template>
      <view class="home_header">
        <view class="home_header_icon">
          <!-- <image src="/static/images/home/uu_home_header.png"></image> -->
        </view>
        <view class="select_city" @click="selectCity">
          <text class="header_text"> {{ cityName }} </text>
          <uni-icons class="icon" type="down" size="16"></uni-icons>
        </view>
      </view>
      <swiper class="swiper" autoplay interval="3000" duration="500">
        <swiper-item class="slide-item" v-for="value in swiperList">
          <image :src="value.img" mode="widthFix"></image>
        </swiper-item>
      </swiper>
      <view class="banner_list">
        <view
          class="item"
          @click="navigateTo('/pages/nearbyStores/nearbyStores')"
        >
          <text class=".text">附近门店</text>
          <text>搜一搜</text>
        </view>
        <view class="item">
          <text>到店</text>
          <text>一键预约</text>
        </view>
        <view class="item">
          <text>店外下单</text>
          <text>快捷下单</text>
        </view>
        <view class="item">
          <text>团队核销</text>
          <text>1元体验</text>
        </view>
      </view>
      <view class="infos">
        <view class="infos-header"></view>
        <view class="infos-list">
          <view class="item" v-for="value in 12" :key="value">
            <image class="" src="" />
            <view class="infos-text">
              <text class="title"
                >这是一个标这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题题</text
              >
              <text class="content"
                >这是这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容内容</text
              >
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { useCityStore } from "@/store/modules/city";
const swiperCurrent = ref(0);
const swiperList = ref([
  { id: 1, img: "/static/images/home/swiper1.png" },
  { id: 2, img: "/static/images/home/swiper2.png" },
  { id: 3, img: "/static/images/home/swiper3.png" },
]);

// 读取城市状态（显示选择结果）
const cityStore = useCityStore();
const cityName = computed(() => cityStore.currentCity || "选择城市");

const selectCity = () => {
  uni.navigateTo({
    url: "/pages/selectCity/selectCity",
  });
};

const paging = ref();
const queryList = (pageNo: number, pageSize: number) => {
  // 模拟请求服务器获取分页数据，请替换成自己的网络请求
  // const params = {
  //   pageNo: pageNo,
  //   pageSize: pageSize,
  // }
  setTimeout(() => {
    paging.value.endRefresh();
  }, 300);
  // this.$request.queryList(params).then(res => {
  // 	// 将请求的结果数组传递给z-paging
  // 	this.$refs.paging.complete(res.data.list);
  // }).catch(res => {
  // 	// 如果请求失败写this.$refs.paging.complete(false);
  // 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
  // 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
  // 	this.$refs.paging.complete(false);
  // })
};

const getCityByLocation = (longitude: number, latitude: number) => {
  const test = longitude + "," + latitude;
  const url = `https://restapi.amap.com/v3/geocode/regeo?key=29ba51d04a274cf952b493b7d0b38ce5&location=${test}`;
  uni.request({
    url,
    success: (res) => {
      const city = (res as unknown as { data: GeocodeRes }).data?.regeocode
        .addressComponent.city;
      if (city) {
        cityStore.setCurrentCity(city);
        cityStore.setLocationCity(city);
      }
    },
  });
};

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};
onMounted(() => {
  // 首次进入，尝试静默定位
  // if (cityName.value == "选择城市") {
  // 静默尝试一次，不弹窗
  uni.getLocation({
    type: "gcj02",
    geocode: true as any,
    success: (res: any) => {
      const city = res?.address?.city || "";
      if (city) {
        cityStore.setCurrentCity(city);
        cityStore.setLocationCity(city);
        return;
      }
      const latitude = res.latitude; // 纬度
      const longitude = res.longitude; // 经度
      getCityByLocation(longitude, latitude);
    },
    fail: () => {
      uni.showToast({ title: "定位失败", icon: "none" });
    },
  });
  // }
});

onShow(() => {
  console.log("Home Page Show");
});
</script>

<style lang="less" scoped>
// .container {
//   background-image: url("/static/images/home/home_bc.png");
//   background-size: 100% 100%;
// }

.home_header {
  display: flex;
  height: 46rpx;
  padding-top: 34rpx;
  align-items: center;

  .home_header_icon {
    width: 224rpx;
    height: 46rpx;
    // background: url('/static/images/home/uu_home_header.png') no-repeat  ;
    background-image: url("/static/images/home/uu_home_header.png");
    background-size: 224rpx 46rpx;
    /* 可选，使图像居中 */
  }

  .select_city {
    display: flex;
    align-items: center;
    padding-left: 21rpx;

    .header_text {
      //   width: 81rpx;
      height: 38rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 27rpx;
      color: #393d3d;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-right: 5rpx;
    }
  }
}

.swiper {
  width: 687rpx;
  height: 262rpx;
  margin-top: 21rpx;
  margin-bottom: 35rpx;

  .slide-item {
    height: 262rpx;
    overflow: hidden;
    border-radius: 19rpx;

    image {
      width: 687rpx;
      height: 262rpx;
      border-radius: 19rpx;
    }
  }
}

.banner_list {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin-bottom: 31rpx;
  background-color: transparent;
  flex-wrap: wrap;
  gap: 18rpx;

  .item {
    width: 335rpx;
    height: 119rpx;
    box-sizing: border-box;
    padding: 23rpx 27rpx 0 35rpx;
    display: flex;
    flex-direction: column;
    background-image: url("/static/images/home/1.png");
    // background-color: red;
    background-size: 335rpx 119rpx;

    text {
      width: 104rpx;
      height: 33rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 25rpx;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;

      &:first-child {
        width: 104rpx;
        margin-bottom: 13rpx;
        text-align: left;
      }

      &:last-child {
        height: 25rpx;
        font-weight: 400;
        font-size: 19rpx;
        color: #aaaaaa;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.infos {
  width: 100%;
  padding-bottom: 31rpx;

  .infos-header {
    width: 140rpx;
    height: 57rpx;
    background-image: url("/static/images/home/infos.png");
    background-size: 140rpx 57rpx;
    margin-bottom: 31rpx;
  }

  .infos-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 23rpx;

    .item {
      box-sizing: border-box;
      width: 688rpx;
      height: 194rpx;
      background: #ffffff;
      border-radius: 31rpx 31rpx 31rpx 31rpx;
      border: 2rpx solid #ffffff;
      padding: 23rpx;
      padding-right: 0;
      display: flex;

      image {
        width: 140rpx;
        height: 148rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        background-color: rgb(218, 90, 15);
      }

      .infos-text {
        width: 481rpx;
        height: 127rpx;
        margin-left: 19rpx;
        margin-top: 10rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 24rpx;

        .title {
          width: 481rpx;
          height: 38rpx;
          line-height: 38rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 500;
          font-size: 27rpx;
          color: #333333;
          text-align: left;
        }

        .content {
          width: 481rpx;
          height: 65rpx;
          line-height: 32rpx;
          font-size: 19rpx;
          color: #333;
          opacity: 0.8;
          text-align: left;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
